<template>
	<div class="guess-dia-out" v-show="value">
		<div class="mask"></div>
		<!-- <div class="lh-title t-c">{{title}}</div> -->
		<div class="guess-dia-content" ref="ceshi">
			<div class="close-btn" @click="closeGusee()"><img src="@/assets/close.png" /></div>
			<div style="height:100%;min-height:100%" class="guess-dia-content-inner">
				<slot></slot>
			</div>
		</div>
	</div>
</template>
<script>

	export default{
		props:{
			value:{
				type:Boolean,
				default:false
			},
		},
		
		watch:{
			value(value){
				/*if (value) {
					this.$nextTick(()=>{
						console.log(this.$refs.ceshi.clientHeight);
					})
				}*/
				this.$emit('input', value);
			}
		},
		methods:{
			
			closeGusee(){
				this.$emit('input', false);
			}
		}
	}
</script>
<style scoped lang="scss">
	@import '@/css/base.scss';
	.mask{
		position: fixed;
    	z-index: 1000;
    	top: 0;
    	right: 0;
    	left: 0;
    	bottom: 0;
    	background: rgba(0, 0, 0, 0.6);
    }
	/*立即竞猜 对话框*/
    .close-btn{position: absolute;z-index: 1112;top: 20px;right:20px;width: 40px;height: 40px;line-height: 40px;text-align: center;}
    .close-btn img{width: 30px;height: 30px;}
    .guess-dia-content{position: fixed;left:30px ;bottom: 0;width: 690px;height: 90%;background: #FFF;z-index: 1001;box-shadow: 0 28px 40px 0 rgba(199,199,199,0.25);border-top-left-radius: 16px;border-top-right-radius: 16px;}
    .guess-dia-content .guess-dia-content-inner{overflow: auto;-webkit-overflow-scrolling: touch;}
    /* .guess-dia-content1{min-height: inherit;position: relative;}
    .lh-title{position: fixed;z-index: 1112;top: 10%;margin-top: -64px;left:50%;width: 128px;height: 128px;line-height:128px;margin-left: -64px;background: #FFE5E7;border-radius: 50%;font-size:28px;color: #FD4658;}
    .lh-header{margin-top: 60px;padding-bottom:30px;border-bottom: 1px solid transparent; 
  border-image: svg(1px-border param(--color #F5F5F5)) 2 2 stretch;border-top:0; }
    .lh-title1{font-size: 32px;font-weight: bold;}
    .guess-number{display: inline-block;padding: 6px 10px;background: #FFF5DD;border-radius: 4px;color: #FF9F03;}
    .lh-desc{margin-top: 8px;color: #958DA5;}
    .lh-time{margin-top: 18px;}
    .lh-timer{height: 66px;line-height: 66px;margin-top: 6px;font-size: 48px;color: #FD4658;}


    .lh-content{margin-top: 54px;padding-bottom: 40px;}
    .choose-item-out{display: inline-block;margin: 24px;text-align: center;}
    .lh-choose-item{width: 92px;height:92px;;line-height:92px;background: #FFFFFF;border: 1px solid #FD4658;border-radius: 50%;text-align: center;color: #FD4658;}
    .lh-choose-item.checked{background: $red;color: #FFF;}
    .lh-bottom-div{height: 480px;}
    .lh-bottom{position: absolute;bottom:0;width: 100%;height: 480px;box-sizing:border-box;border-top: 1px solid transparent; 
  border-image: svg(1px-border param(--color #F5F5F5)) 2 2 stretch;border-bottom:0;}
  	.p-special{padding:34px 30px 0 30px;}
  	.lh-price{margin: 38px 0 22px;}
  	.lh-price input{width: 250px;height: 60px;padding: 8px;line-height: 44px;box-sizing:border-box;outline: 0;border-radius: 8px;border:1px solid #E9E9E9;}
  	.price-unit{width: 60px;height:60px;line-height: 60px;margin-left:10px;border: 1px solid #E9E9E9;border-radius: 8px;text-align: center;font-size: 24px;}
  	.price-unit.actived{background: #FD4658;color: #FFF;}
  	.draw-result{margin-top: 28px;height: 60px;line-height: 60px;padding-left: 46px;background: #FEF8F8;}

    .join-btn{width: 540px;height: 84px;line-height: 84px;margin-top: 42px;box-sizing:border-box;padding: 0;box-shadow: 0 10px 28px 0 rgba(253,70,88,0.65);}
    .join-btn.join-btn-disabled{opacity: 0.6;} */
</style>